// src/Tiptap.tsx
import { useEditor, EditorContent } from "@tiptap/react";
import {
  Document,
  Paragraph,
  Text,
  Collaboration,
  CollaborationCursor,
  Placeholder,
} from "../../../../configs/extensions.ts";
import { WebrtcProvider } from "y-webrtc";
import * as Y from "yjs";
import "./index.scss";
import { useEffect, useState, type FC } from "react";
import type { componentProps } from "../../interface.ts";

const ydoc = new Y.Doc();
const provider = new WebrtcProvider(
  "tiptap-collaboration-cursor-extension",
  ydoc
);
const Tiptap: FC<componentProps> = (props) => {
  const { isExpended } = props;
  const [isSaving, setIsSaving] = useState(false);
  const editor = useEditor({
    extensions: [
      Document,
      Paragraph,
      Text,
      Collaboration.configure({
        document: ydoc,
      }),
      CollaborationCursor.configure({
        provider,
        user: {
          name: "Cyndi Lauper",
          color: "#f783ac",
        },
      }),
      Placeholder.configure({
        placeholder: "请在此区域内编辑",
      }),
    ],
  });

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "s") {
        event.preventDefault();
        // 执行保存逻辑
        saveData();
      }
    };

    window.addEventListener("keydown", handleKeyDown);

    // 组件卸载时解绑事件
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

  const saveData = async () => {
    setIsSaving(true);
    try {
      await new Promise((resolve) => setTimeout(resolve, 2000));
      alert("数据已保存！");
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <div
      className={`
        h-full px-10 mt-5 flex items-center justify-center transition-all duration-1000 ease-in-out
        ${isExpended ? "w-[1200px] -ml-[200px]" : "w-[1000px] ml-0"}
      `}
    >
      <EditorContent className="w-full h-full" editor={editor} />
      {isSaving && (
        <div className="fixed inset-0 z-50 bg-white/60 backdrop-blur-sm flex items-center justify-center">
          <div className="flex flex-col items-center">
            <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
            <div className="mt-2 text-gray-700 text-sm">正在保存中...</div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Tiptap;
